import { useState } from "react";

import { cn } from "@/lib/utils";

// 元素类型定义
type ElementCategory =
  | "alkali-metal"
  | "alkaline-earth-metal"
  | "lanthanide"
  | "actinide"
  | "transition-metal"
  | "post-transition-metal"
  | "metalloid"
  | "reactive-nonmetal"
  | "noble-gas"
  | "unknown";

type ElementState = "solid" | "liquid" | "gas" | "unknown";

interface Element {
  atomicNumber?: number;
  symbol?: string;
  name: string;
  atomicWeight: string;
  category: ElementCategory;
  state: ElementState;
  group: number | null;
  period: number;
}

// 元素类别的中文名称和颜色
const categoryInfo: Record<ElementCategory, { name: string; color: string }> = {
  "alkali-metal": { name: "碱金属", color: "bg-amber-400 hover:bg-amber-500" },
  "alkaline-earth-metal": {
    name: "碱土金属",
    color: "bg-amber-600 hover:bg-amber-700",
  },
  lanthanide: { name: "镧系元素", color: "bg-orange-300 hover:bg-orange-400" },
  actinide: { name: "锕系元素", color: "bg-orange-500 hover:bg-orange-600" },
  "transition-metal": {
    name: "过渡金属",
    color: "bg-red-500 hover:bg-red-600",
  },
  "post-transition-metal": {
    name: "贫金属",
    color: "bg-blue-400 hover:bg-blue-500",
  },
  metalloid: { name: "类金属", color: "bg-teal-400 hover:bg-teal-500" },
  "reactive-nonmetal": {
    name: "活泼非金属",
    color: "bg-green-400 hover:bg-green-500",
  },
  "noble-gas": { name: "稀有气体", color: "bg-purple-600 hover:bg-purple-700" },
  unknown: { name: "未知", color: "bg-gray-400 hover:bg-gray-500" },
};

// 元素状态的中文名称和颜色
const stateInfo: Record<ElementState, { name: string; color: string }> = {
  solid: { name: "固体", color: "text-gray-900" },
  liquid: { name: "液体", color: "text-blue-600" },
  gas: { name: "气体", color: "text-red-600" },
  unknown: { name: "未知", color: "text-gray-500" },
};

// 元素周期表数据
const elements: Element[] = [
  {
    atomicNumber: 1,
    symbol: "H",
    name: "氢",
    atomicWeight: "1.008",
    category: "reactive-nonmetal",
    state: "gas",
    group: 1,
    period: 1,
  },
  {
    atomicNumber: 2,
    symbol: "He",
    name: "氦",
    atomicWeight: "4.0026",
    category: "noble-gas",
    state: "gas",
    group: 18,
    period: 1,
  },
  {
    atomicNumber: 3,
    symbol: "Li",
    name: "锂",
    atomicWeight: "6.94",
    category: "alkali-metal",
    state: "solid",
    group: 1,
    period: 2,
  },
  {
    atomicNumber: 4,
    symbol: "Be",
    name: "铍",
    atomicWeight: "9.0122",
    category: "alkaline-earth-metal",
    state: "solid",
    group: 2,
    period: 2,
  },
  {
    atomicNumber: 5,
    symbol: "B",
    name: "硼",
    atomicWeight: "10.81",
    category: "metalloid",
    state: "solid",
    group: 13,
    period: 2,
  },
  {
    atomicNumber: 6,
    symbol: "C",
    name: "碳",
    atomicWeight: "12.011",
    category: "reactive-nonmetal",
    state: "solid",
    group: 14,
    period: 2,
  },
  {
    atomicNumber: 7,
    symbol: "N",
    name: "氮",
    atomicWeight: "14.007",
    category: "reactive-nonmetal",
    state: "gas",
    group: 15,
    period: 2,
  },
  {
    atomicNumber: 8,
    symbol: "O",
    name: "氧",
    atomicWeight: "15.999",
    category: "reactive-nonmetal",
    state: "gas",
    group: 16,
    period: 2,
  },
  {
    atomicNumber: 9,
    symbol: "F",
    name: "氟",
    atomicWeight: "18.998",
    category: "reactive-nonmetal",
    state: "gas",
    group: 17,
    period: 2,
  },
  {
    atomicNumber: 10,
    symbol: "Ne",
    name: "氖",
    atomicWeight: "20.180",
    category: "noble-gas",
    state: "gas",
    group: 18,
    period: 2,
  },
  {
    atomicNumber: 11,
    symbol: "Na",
    name: "钠",
    atomicWeight: "22.990",
    category: "alkali-metal",
    state: "solid",
    group: 1,
    period: 3,
  },
  {
    atomicNumber: 12,
    symbol: "Mg",
    name: "镁",
    atomicWeight: "24.305",
    category: "alkaline-earth-metal",
    state: "solid",
    group: 2,
    period: 3,
  },
  {
    atomicNumber: 13,
    symbol: "Al",
    name: "铝",
    atomicWeight: "26.982",
    category: "post-transition-metal",
    state: "solid",
    group: 13,
    period: 3,
  },
  {
    atomicNumber: 14,
    symbol: "Si",
    name: "硅",
    atomicWeight: "28.085",
    category: "metalloid",
    state: "solid",
    group: 14,
    period: 3,
  },
  {
    atomicNumber: 15,
    symbol: "P",
    name: "磷",
    atomicWeight: "30.974",
    category: "reactive-nonmetal",
    state: "solid",
    group: 15,
    period: 3,
  },
  {
    atomicNumber: 16,
    symbol: "S",
    name: "硫",
    atomicWeight: "32.06",
    category: "reactive-nonmetal",
    state: "solid",
    group: 16,
    period: 3,
  },
  {
    atomicNumber: 17,
    symbol: "Cl",
    name: "氯",
    atomicWeight: "35.45",
    category: "reactive-nonmetal",
    state: "gas",
    group: 17,
    period: 3,
  },
  {
    atomicNumber: 18,
    symbol: "Ar",
    name: "氩",
    atomicWeight: "39.948",
    category: "noble-gas",
    state: "gas",
    group: 18,
    period: 3,
  },
  {
    atomicNumber: 19,
    symbol: "K",
    name: "钾",
    atomicWeight: "39.098",
    category: "alkali-metal",
    state: "solid",
    group: 1,
    period: 4,
  },
  {
    atomicNumber: 20,
    symbol: "Ca",
    name: "钙",
    atomicWeight: "40.078",
    category: "alkaline-earth-metal",
    state: "solid",
    group: 2,
    period: 4,
  },
  {
    atomicNumber: 21,
    symbol: "Sc",
    name: "钪",
    atomicWeight: "44.956",
    category: "transition-metal",
    state: "solid",
    group: 3,
    period: 4,
  },
  {
    atomicNumber: 22,
    symbol: "Ti",
    name: "钛",
    atomicWeight: "47.867",
    category: "transition-metal",
    state: "solid",
    group: 4,
    period: 4,
  },
  {
    atomicNumber: 23,
    symbol: "V",
    name: "钒",
    atomicWeight: "50.942",
    category: "transition-metal",
    state: "solid",
    group: 5,
    period: 4,
  },
  {
    atomicNumber: 24,
    symbol: "Cr",
    name: "铬",
    atomicWeight: "51.996",
    category: "transition-metal",
    state: "solid",
    group: 6,
    period: 4,
  },
  {
    atomicNumber: 25,
    symbol: "Mn",
    name: "锰",
    atomicWeight: "54.938",
    category: "transition-metal",
    state: "solid",
    group: 7,
    period: 4,
  },
  {
    atomicNumber: 26,
    symbol: "Fe",
    name: "铁",
    atomicWeight: "55.845",
    category: "transition-metal",
    state: "solid",
    group: 8,
    period: 4,
  },
  {
    atomicNumber: 27,
    symbol: "Co",
    name: "钴",
    atomicWeight: "58.933",
    category: "transition-metal",
    state: "solid",
    group: 9,
    period: 4,
  },
  {
    atomicNumber: 28,
    symbol: "Ni",
    name: "镍",
    atomicWeight: "58.693",
    category: "transition-metal",
    state: "solid",
    group: 10,
    period: 4,
  },
  {
    atomicNumber: 29,
    symbol: "Cu",
    name: "铜",
    atomicWeight: "63.546",
    category: "transition-metal",
    state: "solid",
    group: 11,
    period: 4,
  },
  {
    atomicNumber: 30,
    symbol: "Zn",
    name: "锌",
    atomicWeight: "65.38",
    category: "transition-metal",
    state: "solid",
    group: 12,
    period: 4,
  },
  {
    atomicNumber: 31,
    symbol: "Ga",
    name: "镓",
    atomicWeight: "69.723",
    category: "post-transition-metal",
    state: "solid",
    group: 13,
    period: 4,
  },
  {
    atomicNumber: 32,
    symbol: "Ge",
    name: "锗",
    atomicWeight: "72.630",
    category: "metalloid",
    state: "solid",
    group: 14,
    period: 4,
  },
  {
    atomicNumber: 33,
    symbol: "As",
    name: "砷",
    atomicWeight: "74.922",
    category: "metalloid",
    state: "solid",
    group: 15,
    period: 4,
  },
  {
    atomicNumber: 34,
    symbol: "Se",
    name: "硒",
    atomicWeight: "78.971",
    category: "reactive-nonmetal",
    state: "solid",
    group: 16,
    period: 4,
  },
  {
    atomicNumber: 35,
    symbol: "Br",
    name: "溴",
    atomicWeight: "79.904",
    category: "reactive-nonmetal",
    state: "liquid",
    group: 17,
    period: 4,
  },
  {
    atomicNumber: 36,
    symbol: "Kr",
    name: "氪",
    atomicWeight: "83.798",
    category: "noble-gas",
    state: "gas",
    group: 18,
    period: 4,
  },
  // 第5周期
  {
    atomicNumber: 37,
    symbol: "Rb",
    name: "铷",
    atomicWeight: "85.468",
    category: "alkali-metal",
    state: "solid",
    group: 1,
    period: 5,
  },
  {
    atomicNumber: 38,
    symbol: "Sr",
    name: "锶",
    atomicWeight: "87.62",
    category: "alkaline-earth-metal",
    state: "solid",
    group: 2,
    period: 5,
  },
  {
    atomicNumber: 39,
    symbol: "Y",
    name: "钇",
    atomicWeight: "88.906",
    category: "transition-metal",
    state: "solid",
    group: 3,
    period: 5,
  },
  {
    atomicNumber: 40,
    symbol: "Zr",
    name: "锆",
    atomicWeight: "91.224",
    category: "transition-metal",
    state: "solid",
    group: 4,
    period: 5,
  },
  {
    atomicNumber: 41,
    symbol: "Nb",
    name: "铌",
    atomicWeight: "92.906",
    category: "transition-metal",
    state: "solid",
    group: 5,
    period: 5,
  },
  {
    atomicNumber: 42,
    symbol: "Mo",
    name: "钼",
    atomicWeight: "95.95",
    category: "transition-metal",
    state: "solid",
    group: 6,
    period: 5,
  },
  {
    atomicNumber: 43,
    symbol: "Tc",
    name: "锝",
    atomicWeight: "(98)",
    category: "transition-metal",
    state: "solid",
    group: 7,
    period: 5,
  },
  {
    atomicNumber: 44,
    symbol: "Ru",
    name: "钌",
    atomicWeight: "101.07",
    category: "transition-metal",
    state: "solid",
    group: 8,
    period: 5,
  },
  {
    atomicNumber: 45,
    symbol: "Rh",
    name: "铑",
    atomicWeight: "102.91",
    category: "transition-metal",
    state: "solid",
    group: 9,
    period: 5,
  },
  {
    atomicNumber: 46,
    symbol: "Pd",
    name: "钯",
    atomicWeight: "106.42",
    category: "transition-metal",
    state: "solid",
    group: 10,
    period: 5,
  },
  {
    atomicNumber: 47,
    symbol: "Ag",
    name: "银",
    atomicWeight: "107.87",
    category: "transition-metal",
    state: "solid",
    group: 11,
    period: 5,
  },
  {
    atomicNumber: 48,
    symbol: "Cd",
    name: "镉",
    atomicWeight: "112.41",
    category: "transition-metal",
    state: "solid",
    group: 12,
    period: 5,
  },
  {
    atomicNumber: 49,
    symbol: "In",
    name: "铟",
    atomicWeight: "114.82",
    category: "post-transition-metal",
    state: "solid",
    group: 13,
    period: 5,
  },
  {
    atomicNumber: 50,
    symbol: "Sn",
    name: "锡",
    atomicWeight: "118.71",
    category: "post-transition-metal",
    state: "solid",
    group: 14,
    period: 5,
  },
  {
    atomicNumber: 51,
    symbol: "Sb",
    name: "锑",
    atomicWeight: "121.76",
    category: "metalloid",
    state: "solid",
    group: 15,
    period: 5,
  },
  {
    atomicNumber: 52,
    symbol: "Te",
    name: "碲",
    atomicWeight: "127.60",
    category: "metalloid",
    state: "solid",
    group: 16,
    period: 5,
  },
  {
    atomicNumber: 53,
    symbol: "I",
    name: "碘",
    atomicWeight: "126.90",
    category: "reactive-nonmetal",
    state: "solid",
    group: 17,
    period: 5,
  },
  {
    atomicNumber: 54,
    symbol: "Xe",
    name: "氙",
    atomicWeight: "131.29",
    category: "noble-gas",
    state: "gas",
    group: 18,
    period: 5,
  },
  // 第6周期（部分）
  {
    atomicNumber: 55,
    symbol: "Cs",
    name: "铯",
    atomicWeight: "132.91",
    category: "alkali-metal",
    state: "solid",
    group: 1,
    period: 6,
  },
  {
    atomicNumber: 56,
    symbol: "Ba",
    name: "钡",
    atomicWeight: "137.33",
    category: "alkaline-earth-metal",
    state: "solid",
    group: 2,
    period: 6,
  },
  // 镧系元素占位符
  {
    atomicNumber: 57,
    symbol: "La",
    name: "镧",
    atomicWeight: "138.91",
    category: "lanthanide",
    state: "solid",
    group: null,
    period: 6,
  },
  {
    atomicNumber: 72,
    symbol: "Hf",
    name: "铪",
    atomicWeight: "178.49",
    category: "transition-metal",
    state: "solid",
    group: 4,
    period: 6,
  },
  {
    atomicNumber: 73,
    symbol: "Ta",
    name: "钽",
    atomicWeight: "180.95",
    category: "transition-metal",
    state: "solid",
    group: 5,
    period: 6,
  },
  {
    atomicNumber: 74,
    symbol: "W",
    name: "钨",
    atomicWeight: "183.84",
    category: "transition-metal",
    state: "solid",
    group: 6,
    period: 6,
  },
  {
    atomicNumber: 75,
    symbol: "Re",
    name: "铼",
    atomicWeight: "186.21",
    category: "transition-metal",
    state: "solid",
    group: 7,
    period: 6,
  },
  {
    atomicNumber: 76,
    symbol: "Os",
    name: "锇",
    atomicWeight: "190.23",
    category: "transition-metal",
    state: "solid",
    group: 8,
    period: 6,
  },
  {
    atomicNumber: 77,
    symbol: "Ir",
    name: "铱",
    atomicWeight: "192.22",
    category: "transition-metal",
    state: "solid",
    group: 9,
    period: 6,
  },
  {
    atomicNumber: 78,
    symbol: "Pt",
    name: "铂",
    atomicWeight: "195.08",
    category: "transition-metal",
    state: "solid",
    group: 10,
    period: 6,
  },
  {
    atomicNumber: 79,
    symbol: "Au",
    name: "金",
    atomicWeight: "196.97",
    category: "transition-metal",
    state: "solid",
    group: 11,
    period: 6,
  },
  {
    atomicNumber: 80,
    symbol: "Hg",
    name: "汞",
    atomicWeight: "200.59",
    category: "transition-metal",
    state: "liquid",
    group: 12,
    period: 6,
  },
  {
    atomicNumber: 81,
    symbol: "Tl",
    name: "铊",
    atomicWeight: "204.38",
    category: "post-transition-metal",
    state: "solid",
    group: 13,
    period: 6,
  },
  {
    atomicNumber: 82,
    symbol: "Pb",
    name: "铅",
    atomicWeight: "207.2",
    category: "post-transition-metal",
    state: "solid",
    group: 14,
    period: 6,
  },
  {
    atomicNumber: 83,
    symbol: "Bi",
    name: "铋",
    atomicWeight: "208.98",
    category: "post-transition-metal",
    state: "solid",
    group: 15,
    period: 6,
  },
  {
    atomicNumber: 84,
    symbol: "Po",
    name: "钋",
    atomicWeight: "(209)",
    category: "post-transition-metal",
    state: "solid",
    group: 16,
    period: 6,
  },
  {
    atomicNumber: 85,
    symbol: "At",
    name: "砹",
    atomicWeight: "(210)",
    category: "reactive-nonmetal",
    state: "solid",
    group: 17,
    period: 6,
  },
  {
    atomicNumber: 86,
    symbol: "Rn",
    name: "氡",
    atomicWeight: "(222)",
    category: "noble-gas",
    state: "gas",
    group: 18,
    period: 6,
  },
  // 第7周期（部分）
  {
    atomicNumber: 87,
    symbol: "Fr",
    name: "钫",
    atomicWeight: "(223)",
    category: "alkali-metal",
    state: "solid",
    group: 1,
    period: 7,
  },
  {
    atomicNumber: 88,
    symbol: "Ra",
    name: "镭",
    atomicWeight: "(226)",
    category: "alkaline-earth-metal",
    state: "solid",
    group: 2,
    period: 7,
  },
  // 锕系元素占位符
  {
    atomicNumber: 89,
    symbol: "Ac",
    name: "锕",
    atomicWeight: "(227)",
    category: "actinide",
    state: "solid",
    group: null,
    period: 7,
  },
  {
    atomicNumber: 104,
    symbol: "Rf",
    name: "𬬻",
    atomicWeight: "(267)",
    category: "transition-metal",
    state: "unknown",
    group: 4,
    period: 7,
  },
  {
    atomicNumber: 105,
    symbol: "Db",
    name: "𬭊",
    atomicWeight: "(268)",
    category: "transition-metal",
    state: "unknown",
    group: 5,
    period: 7,
  },
  {
    atomicNumber: 106,
    symbol: "Sg",
    name: "𬭳",
    atomicWeight: "(269)",
    category: "transition-metal",
    state: "unknown",
    group: 6,
    period: 7,
  },
  {
    atomicNumber: 107,
    symbol: "Bh",
    name: "𬭛",
    atomicWeight: "(270)",
    category: "transition-metal",
    state: "unknown",
    group: 7,
    period: 7,
  },
  {
    atomicNumber: 108,
    symbol: "Hs",
    name: "𬭶",
    atomicWeight: "(277)",
    category: "transition-metal",
    state: "unknown",
    group: 8,
    period: 7,
  },
  {
    atomicNumber: 109,
    symbol: "Mt",
    name: "鿏",
    atomicWeight: "(278)",
    category: "unknown",
    state: "unknown",
    group: 9,
    period: 7,
  },
  {
    atomicNumber: 110,
    symbol: "Ds",
    name: "𫟼",
    atomicWeight: "(281)",
    category: "unknown",
    state: "unknown",
    group: 10,
    period: 7,
  },
  {
    atomicNumber: 111,
    symbol: "Rg",
    name: "𬬭",
    atomicWeight: "(282)",
    category: "unknown",
    state: "unknown",
    group: 11,
    period: 7,
  },
  {
    atomicNumber: 112,
    symbol: "Cn",
    name: "鿔",
    atomicWeight: "(285)",
    category: "transition-metal",
    state: "unknown",
    group: 12,
    period: 7,
  },
  {
    atomicNumber: 113,
    symbol: "Nh",
    name: "鉨",
    atomicWeight: "(286)",
    category: "unknown",
    state: "unknown",
    group: 13,
    period: 7,
  },
  {
    atomicNumber: 114,
    symbol: "Fl",
    name: "𫓧",
    atomicWeight: "(289)",
    category: "unknown",
    state: "unknown",
    group: 14,
    period: 7,
  },
  {
    atomicNumber: 115,
    symbol: "Mc",
    name: "镆",
    atomicWeight: "(290)",
    category: "unknown",
    state: "unknown",
    group: 15,
    period: 7,
  },
  {
    atomicNumber: 116,
    symbol: "Lv",
    name: "鉝",
    atomicWeight: "(293)",
    category: "unknown",
    state: "unknown",
    group: 16,
    period: 7,
  },
  {
    atomicNumber: 117,
    symbol: "Ts",
    name: "鿬",
    atomicWeight: "(294)",
    category: "unknown",
    state: "unknown",
    group: 17,
    period: 7,
  },
  {
    atomicNumber: 118,
    symbol: "Og",
    name: "鿫",
    atomicWeight: "(294)",
    category: "unknown",
    state: "unknown",
    group: 18,
    period: 7,
  },

  // 镧系元素
  {
    atomicNumber: 58,
    symbol: "Ce",
    name: "铈",
    atomicWeight: "140.12",
    category: "lanthanide",
    state: "solid",
    group: null,
    period: 6,
  },
  {
    atomicNumber: 59,
    symbol: "Pr",
    name: "镨",
    atomicWeight: "140.91",
    category: "lanthanide",
    state: "solid",
    group: null,
    period: 6,
  },
  {
    atomicNumber: 60,
    symbol: "Nd",
    name: "钕",
    atomicWeight: "144.24",
    category: "lanthanide",
    state: "solid",
    group: null,
    period: 6,
  },
  {
    atomicNumber: 61,
    symbol: "Pm",
    name: "钷",
    atomicWeight: "(145)",
    category: "lanthanide",
    state: "solid",
    group: null,
    period: 6,
  },
  {
    atomicNumber: 62,
    symbol: "Sm",
    name: "钐",
    atomicWeight: "150.36",
    category: "lanthanide",
    state: "solid",
    group: null,
    period: 6,
  },
  {
    atomicNumber: 63,
    symbol: "Eu",
    name: "铕",
    atomicWeight: "151.96",
    category: "lanthanide",
    state: "solid",
    group: null,
    period: 6,
  },
  {
    atomicNumber: 64,
    symbol: "Gd",
    name: "钆",
    atomicWeight: "157.25",
    category: "lanthanide",
    state: "solid",
    group: null,
    period: 6,
  },
  {
    atomicNumber: 65,
    symbol: "Tb",
    name: "铽",
    atomicWeight: "158.93",
    category: "lanthanide",
    state: "solid",
    group: null,
    period: 6,
  },
  {
    atomicNumber: 66,
    symbol: "Dy",
    name: "镝",
    atomicWeight: "162.50",
    category: "lanthanide",
    state: "solid",
    group: null,
    period: 6,
  },
  {
    atomicNumber: 67,
    symbol: "Ho",
    name: "钬",
    atomicWeight: "164.93",
    category: "lanthanide",
    state: "solid",
    group: null,
    period: 6,
  },
  {
    atomicNumber: 68,
    symbol: "Er",
    name: "铒",
    atomicWeight: "167.26",
    category: "lanthanide",
    state: "solid",
    group: null,
    period: 6,
  },
  {
    atomicNumber: 69,
    symbol: "Tm",
    name: "铥",
    atomicWeight: "168.93",
    category: "lanthanide",
    state: "solid",
    group: null,
    period: 6,
  },
  {
    atomicNumber: 70,
    symbol: "Yb",
    name: "镱",
    atomicWeight: "173.05",
    category: "lanthanide",
    state: "solid",
    group: null,
    period: 6,
  },
  {
    atomicNumber: 71,
    symbol: "Lu",
    name: "镥",
    atomicWeight: "174.97",
    category: "lanthanide",
    state: "solid",
    group: null,
    period: 6,
  },

  // 锕系元素
  {
    atomicNumber: 90,
    symbol: "Th",
    name: "钍",
    atomicWeight: "232.04",
    category: "actinide",
    state: "solid",
    group: null,
    period: 7,
  },
  {
    atomicNumber: 91,
    symbol: "Pa",
    name: "镤",
    atomicWeight: "231.04",
    category: "actinide",
    state: "solid",
    group: null,
    period: 7,
  },
  {
    atomicNumber: 92,
    symbol: "U",
    name: "铀",
    atomicWeight: "238.03",
    category: "actinide",
    state: "solid",
    group: null,
    period: 7,
  },
  {
    atomicNumber: 93,
    symbol: "Np",
    name: "镎",
    atomicWeight: "(237)",
    category: "actinide",
    state: "solid",
    group: null,
    period: 7,
  },
  {
    atomicNumber: 94,
    symbol: "Pu",
    name: "钚",
    atomicWeight: "(244)",
    category: "actinide",
    state: "solid",
    group: null,
    period: 7,
  },
  {
    atomicNumber: 95,
    symbol: "Am",
    name: "镅",
    atomicWeight: "(243)",
    category: "actinide",
    state: "solid",
    group: null,
    period: 7,
  },
  {
    atomicNumber: 96,
    symbol: "Cm",
    name: "锔",
    atomicWeight: "(247)",
    category: "actinide",
    state: "solid",
    group: null,
    period: 7,
  },
  {
    atomicNumber: 97,
    symbol: "Bk",
    name: "锫",
    atomicWeight: "(247)",
    category: "actinide",
    state: "solid",
    group: null,
    period: 7,
  },
  {
    atomicNumber: 98,
    symbol: "Cf",
    name: "锎",
    atomicWeight: "(251)",
    category: "actinide",
    state: "solid",
    group: null,
    period: 7,
  },
  {
    atomicNumber: 99,
    symbol: "Es",
    name: "锿",
    atomicWeight: "(252)",
    category: "actinide",
    state: "solid",
    group: null,
    period: 7,
  },
  {
    atomicNumber: 100,
    symbol: "Fm",
    name: "镄",
    atomicWeight: "(257)",
    category: "actinide",
    state: "solid",
    group: null,
    period: 7,
  },
  {
    atomicNumber: 101,
    symbol: "Md",
    name: "钔",
    atomicWeight: "(258)",
    category: "actinide",
    state: "solid",
    group: null,
    period: 7,
  },
  {
    atomicNumber: 102,
    symbol: "No",
    name: "锘",
    atomicWeight: "(259)",
    category: "actinide",
    state: "solid",
    group: null,
    period: 7,
  },
  {
    atomicNumber: 103,
    symbol: "Lr",
    name: "铹",
    atomicWeight: "(266)",
    category: "actinide",
    state: "solid",
    group: null,
    period: 7,
  },
  {
    name: "镧系",
    atomicWeight: "",
    category: "lanthanide",
    state: "solid",
    group: 3,
    period: 6,
  },
  {
    name: "锕系",
    atomicWeight: "",
    category: "actinide",
    state: "solid",
    group: 3,
    period: 7,
  },
];

function PeriodicTable() {
  const [hoveredCategory, setHoveredCategory] =
    useState<ElementCategory | null>(null);

  // 获取元素在表格中的位置
  const getElementPosition = (element: Element) => {
    if (element.group === null) {
      if (element.atomicNumber >= 57 && element.atomicNumber <= 71) {
        // 镧系元素
        return {
          row: 8,
          col: element.atomicNumber - 57 + 3,
        };
      }
      if (element.atomicNumber >= 89 && element.atomicNumber <= 103) {
        // 锕系元素
        return {
          row: 9,
          col: element.atomicNumber - 89 + 3,
        };
      }
      return { row: 0, col: 0 };
    }

    return {
      row: element.period,
      col: element.group,
    };
  };

  // 渲染元素格子
  const renderElement = (element: Element) => {
    const isHighlighted = hoveredCategory === element.category;
    const position = getElementPosition(element);

    const cellClassNames = () => {
      if (hoveredCategory === null) {
        return categoryInfo[element.category].color;
      }
      return isHighlighted
        ? categoryInfo[element.category].color
        : "opacity-40";
    };

    return (
      <div
        key={element.atomicNumber}
        className={cn(
          "relative flex flex-col items-center justify-center p-1 border border-gray-700 transition-colors duration-200",
          "h-16 w-full text-center",
          cellClassNames()
        )}
        style={{
          gridRow: position.row,
          gridColumn: position.col,
        }}
      >
        <div className="absolute top-0.5 left-0.5 text-xs">
          {element.atomicNumber}
        </div>
        <div
          className={cn("text-xl font-bold", stateInfo[element.state].color)}
        >
          {element.symbol}
        </div>
        <div className="text-xs truncate max-w-full">{element.name}</div>
        <div className="text-xs opacity-70 truncate max-w-full">
          {element.atomicWeight}
        </div>
      </div>
    );
  };

  // 渲染类别图例
  const renderCategoryLegend = () => (
    <div className="flex flex-wrap gap-2 mb-4">
      {Object.entries(categoryInfo).map(([category, info]) => (
        <div
          key={category}
          className="flex items-center gap-1 cursor-pointer"
          onMouseEnter={() => setHoveredCategory(category as ElementCategory)}
          onMouseLeave={() => setHoveredCategory(null)}
        >
          <div className={cn("w-4 h-4 rounded-sm", info.color)} />
          <span className="text-sm">{info.name}</span>
        </div>
      ))}
    </div>
  );

  return (
    <div className="mt-4 mb-4 p-4 border border-gray-700 rounded-lg">
      {/* 图例 */}
      <div>{renderCategoryLegend()}</div>

      {/* 周期表网格 */}
      <div
        className="grid gap-px overflow-x-auto"
        style={{
          gridTemplateRows: "repeat(9, minmax(min-content, 1fr))",
          gridTemplateColumns: "repeat(18, minmax(min-content, 1fr))",
        }}
      >
        {/* 渲染元素 */}
        {elements.map((element) => renderElement(element))}
      </div>
    </div>
  );
}

export default PeriodicTable;
